<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <son :msg="pmsg"></son>
</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  let son = {
    data() {
      return {
        hello: 'xxxx'
      }
    },
    props: ['msg', 'changePMSG'],
    template: '<span>{{msg}} <button @click="fn">dddd</button></span>',
    methods: {
      fn() {
        this.msg = 1233; // props中的数据也会代理到子组件的实例身上，可以直接通过this访问
      }
    }
  };

  let vm = new Vue({
    el: '#app',
    data: {
      pmsg: 'msg from parent'
    },
    methods: {
      changeMsg() {
        this.pmsg = 123445
      }
    },
    components: {
      son
    }
  });
  // 1. 子组件中的数据不能全是写死的，而是有一部分从父组件传递过来的
  // 2. 为了把父组件的数据传递给子组件，子组件在标签上动态绑定一个属性，这个属性绑定父组件的数据，并且在子组件的props中注册这个属性
  // 3. 子组件如果想使用父组件的数据，就使用对应的props就可以（父传子用props）

  // 单向数据流：数据只能通过父组件传递给子组件，而不能直接从子组件传给父组件，子组件也不能直接修改父组件的数据；当父组件的数据发生改变之后，子组件的收到的数据也会跟着变化；如上面的例子，直接修改从父组件中的数据会引发Vue的报错；
  // 如果子组件想修改父组件的数据，只能通知父组件，让父组件修改数据；
</script>
</body>
</html>